<template>
	<div class="homeIcon">
		<swiper :options="swiperOption" >
		    <!-- slides -->
		    <swiper-slide v-for="item in page" :key="item.id">
		    	<div class="icon-items" v-for="pp in item" :key="pp.id">
					<img :src="pp.iconUrl" />
					<p>{{pp.title}}</p>
				</div>
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper> 
	</div>
</template>

<script>
export default {
	props:["iconList"],
	data (){
		return {
			swiperOption:{
				pagination: {
		            el: '.swiper-pagination'
		          }
			}
		}
	},
	computed:{
		page (){
			var pages=[];
			this.iconList.forEach((item,index)=>{
				var idx=Math.floor(index/8);
				if(!pages[idx]) {
					pages[idx]=[]
				}
				pages[idx].push(item)
			})
			
			return pages;
		}
	}
}
</script>

<style scoped>
	.homeIcon{
		width: 100%;
		height: 2rem;
		background: #FFFFFF;
/*		margin-top: -10px;*/
	}
	.homeIcon .icon-items{
		width: 25%;
		height: 26.6%;
		text-align: center;
		float: left;
		padding: 10px 0;
	}
	.homeIcon .icon-items img{
		width: 0.55rem;
		height: 0.55rem;
	    display: block;
	    margin: 0px auto;
	}
	.homeIcon .icon-items p{
		font-size: 0.14rem;
		padding-top: .05rem;
	}
	.swiper-container-horizontal  .swiper-pagination-bullets {
	    bottom: -8px;
	}
	.homeIcon >>>.swiper-pagination-bullet-active{
		background: rgba(0,175,190,.8);
	}
	
</style>